<template>
  <div>
    <el-form>
      <el-button-group style="margin-bottom:20px;">
        <el-button size="small" icon="el-icon-view" @click="link_detail">查看</el-button>
        <el-button size="small" icon="el-icon-edit">编辑</el-button>
        <el-button size="small" icon="el-icon-circle-close-outline">删除</el-button>
        <el-button size="small" icon="el-icon-plus">新增</el-button>
        <el-button size="small" icon="el-icon-plus" :disabled="multipleSelection.length === 0" @click="handleDownloadXlsx(multipleSelection)">下载</el-button>
      </el-button-group>
    </el-form>
    <el-table
      :data="currentTableData"
      v-loading="loading"
      size="mini"
      stripe
      style="width: 100%;"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="设备名称" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="设备规格" width="150" align="center">
        <template slot-scope="scope">
          {{scope.row.size}}
        </template>
      </el-table-column>

      <el-table-column label="进口/国产" width="80" align="center">
        <template slot-scope="scope">
          <el-tag
            size="mini"
            :type="scope.row.come=='进口' ? 'warning' : 'success'">
            {{scope.row.come=='进口' ? '进口' : '国产'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.time}}
        </template>
      </el-table-column>
      <el-table-column label="申请人" width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.apply_name}}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag
            size="mini"
            type="info" v-if="scope.row.state==0">
            申请中
          </el-tag>
          <el-tag
            size="mini"
            type="warning" v-if="scope.row.state==1">
            未通过
          </el-tag>
          <el-tag
            size="mini"
            type="success" v-if="scope.row.state==2">
            已通过
          </el-tag>
          <el-tag
            size="mini"
            type="success" v-if="scope.row.state==3">
            设备已入库
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import BooleanControl from '../BooleanControl'
import BooleanControlMini from '../BooleanControlMini'
export default {
  components: {
    BooleanControl,
    BooleanControlMini
  },
  props: {
    tableData: {
      default: () => []
    },
    loading: {
      default: false
    }
  },
  data () {
    return {
      currentTableData: [],
      multipleSelection: [],
      downloadColumns: [
        { label: '设备名称', prop: 'name' },
        { label: '设备规格', prop: 'size' },
        { label: '进口/国产', prop: 'come' },
        { label: '申请时间', prop: 'time' },
        { label: '申请人', prop: 'apply_name' },
        { label: '状态', prop: 'state' }
      ]
    }
  },
  watch: {
    tableData: {
      handler (val) {
        this.currentTableData = val
      },
      immediate: true
    }
  },
  methods: {
    link_detail () {
      var id = this.multipleSelection[0].id
      console.log(id)
      this.$router.push(`/resource/management/applyform?id=${id}`)
    },
    handleSwitchChange (val, index) {
      const oldValue = this.currentTableData[index]
      this.$set(this.currentTableData, index, {
        ...oldValue,
        type: val
      })
      // 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    downloadDataTranslate (data) {
      return data.map(row => ({
        ...row,
        used: row.used ? '离职' : '在职'
      }))
    },
    handleDownloadXlsx (data) {
      this.$export.excel({
        title: 'D2Admin 表格示例',
        columns: this.data,
        data: this.downloadDataTranslate(data)
      })
        .then(() => {
          this.$message('导出表格成功')
        })
    }
  }
}
</script>
